<script lang="ts" setup>
const { c } = defineProps(['c'])
</script>

<template>
    <div class="common-view">
        <div class="avatar">
            <img :src="c.avatarUrl" alt="">
        </div>
        <div class="common-con">
            <div class="common-nm">{{ c?.nick }} <span>LV {{ c?.userLevel }}</span></div>
            <div class="common-score">
                <i :class="{active: c?.score >= 2 }"></i>
                <i :class="{active: c?.score >= 4 }"></i>
                <i :class="{active: c?.score >= 6 }"></i>
                <i :class="{active: c?.score >= 8 }"></i>
                <i :class="{active: c?.score == 10 }"></i>
                <em>{{ c?.score }}分</em>
                <span>购票</span>
            </div>
            <div class="common-content">{{ c?.content }} </div>
            <div class="common-tip" v-if="c?.topic?.keyWords[0]"><span># </span> {{ c?.topic?.keyWords[0] }}</div>
            <div class="common-bot">
                <div class="reply">
                    <span>{{ c?.replyCount }} 回复</span>03-10 {{ c?.ipLocName }}
                </div>
                <div class="zan">{{ c?.upCount }} 赞</div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.common-view{
    width: 100%;
    padding: 0 2vw;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 4vw;
    padding-bottom: 4vw;
    border-bottom: #ececec 1.5px dashed;

    .avatar{
        width: 14vw;
        text-align: center;

        img{
            width: 11vw;
            border-radius: 50%;
        }
    }
    .common-con{
        width: 80vw;

        div{
            width: 80vw;
        }

        .common-nm{
            color: #333333;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            display: flex;
            align-items: center;

            span{
                color: #c65f5d;
                font-size: 10px;
                width: 10vw;
                height: 4vw;
                line-height: 4vw;
                text-align: center;
                display: inline-block;
                border: #c65f5d 1px solid;
                border-radius: 4vw;
                margin-left: 2vw;
            }
        }

        .common-score{
            color: #ffbb2b;
            margin: 3vw 0;
            display: flex;
            align-items: center;
            
            i{
                display: inline-block;
                width: 4vw;
                height: 4vw;
                margin-right: 1vw;
                background: url(../../assets/imgs/movie/nostar.png);
                background-size: contain;
                
                &.active{
                    background: url(../../assets/imgs/movie/star.png);
                    background-size: contain;
                }
            }
            em{
                font-style: italic;
            }
            span{
                color: #727e97;
                font-size: 13px;
                display: inline-block;
                width: 12vw;
                height: 5vw;
                line-height: 5vw;
                text-align: center;
                background-color: #f3f8fc;
                border-radius: 4vw;
                margin-left: 2vw;
                letter-spacing: 1vw;
            }
        }

        .common-content{
            color: #555555;
            font-size: 4.2vw;
            line-height: 5vw;
            font-family: cursive;
            font-weight: bold;
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 7;
            overflow: hidden;
        }
        .common-tip{
            width: 32vw;
            height: 7vw;
            color: #c65f5d;
            font-size: 12px;
            border: #a56868 1px solid;
            border-radius: 0 4vw 4vw 4vw;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 3vw 0;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;

            span{
                font-size: 18px;
                font-weight: bold;
            }
        }
        .common-bot{
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 2vw;
            
            .reply{
                font-size: 13px;
                width: 50vw;
                color: #9e9e9e;
                display: flex;
                align-items: center;
                
                span{
                    color: #6f7f93;
                    padding: 0 2.5vw;
                    line-height: 7vw;
                    background-color: #eef1f8;
                    border-radius: 4vw;
                    margin-right: 2vw;
                }
            }
            .zan{
                color: #c65f5d;
                font-size: 12px;
                width: 14vw;
                height: 6vw;
                line-height: 6vw;
                text-align: center;
                border: #c65f5d 1px solid;
                border-radius: 4vw;
            }
        }
    }
}
</style>